﻿@page "/components/select"

<DocsPage>
    <DocsPageHeader Title="Select" Component="@nameof(MudSelect<T>)" SubTitle="Select fields allow users to provide information from a list of options.">
        <Description>
        </Description>
    </DocsPageHeader>
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="Visual Playground">
                <Description></Description>
            </SectionHeader>
            <SectionContent ShowCode="false" Code="@nameof(SelectPlaygroundExample)">
                <SelectPlaygroundExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Using Select">
                <Description></Description>
            </SectionHeader>
            <SectionContent ShowCode="false" Code="@nameof(SelectUsageExample)">
                <SelectUsageExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Multiselect">
                <Description>
                    If you set <CodeInline>MultiSelection="true"</CodeInline>, you can select multiple values. The selected options are returned as concatenated comma-delimited
                    string via <CodeInline>Value</CodeInline> and as a <CodeInline>HashSet&lt;string></CodeInline> via <CodeInline>SelectedValues</CodeInline>. The delimited string
                    can be modified with the <CodeInline>Delimiter</CodeInline> parameter.
                </Description>
            </SectionHeader>
            <SectionContent ShowCode="false" Code="@nameof(MultiSelectExample)">
                <MultiSelectExample />
            </SectionContent>
            <SectionSubGroups>
                <DocsPageSection>
                    <SectionHeader Title="Customized Selection Text">
                        <Description>
                            If you set <CodeInline>MultiSelection="true"</CodeInline>, you can select multiple values.
                            By defining the <CodeInline>MultiSelectionTextFunc</CodeInline> method, the returned selection can be fully customized.
                        </Description>
                    </SectionHeader>
                    <SectionContent ShowCode="false" Code="@nameof(MultiSelectCustomizedExample)">
                        <MultiSelectCustomizedExample />
                    </SectionContent>
                </DocsPageSection>
                <DocsPageSection>
                    <SectionHeader Title="Select All">
                        <Description>
                            If you set <CodeInline>SelectAll="true"</CodeInline>, you can display a 'Select all' option to select or deselect all items.
                            It is added at the top of the list of items. The text for this option can be customized by the <CodeInline>SelectAllText</CodeInline> parameter.
                        </Description>
                    </SectionHeader>
                    <SectionContent ShowCode="false" Code="@nameof(MultiSelectSelectAllExample)">
                        <MultiSelectSelectAllExample />
                    </SectionContent>
                </DocsPageSection>
                <DocsPageSection>
                    <SectionHeader Title="Complex Object">
                        <Description>
                            To handle complex objects, you should implement either <CodeInline>IEquatable</CodeInline> on a type or <CodeInline>IEqualityComparer</CodeInline> and pass it to the <CodeInline>Comparer</CodeInline> parameter.
                            For displaying the selected values, you can override the <CodeInline>ToString</CodeInline> method or use the <CodeInline>ToStringFunc</CodeInline> parameter.
                        </Description>
                    </SectionHeader>
                    <SectionContent ShowCode="false" Code="@nameof(MultiSelectComplexExample)">
                        <MultiSelectComplexExample />
                    </SectionContent>
                </DocsPageSection>
            </SectionSubGroups>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Dynamic Sizing">
                <Description>
                    The <CodeInline>MudSelect</CodeInline> component provides dynamic sizing capabilities through the <CodeInline>FullWidth</CodeInline> and <CodeInline>FitContent</CodeInline> parameters, allowing it to adapt to different layout needs:
                    <MudStack>
                        <MudBadge Class="ml-4" Color="Color.Primary" Origin="Origin.CenterLeft" Dot Bordered>
                            <div class="pl-2">
                                Default Behavior - <CodeInline>FullWidth=False</CodeInline>: The component expands to fill the available space within its container, adjusting dynamically based on its surroundings.
                            </div>
                        </MudBadge>
                        <MudBadge Class="ml-4" Color="Color.Primary" Origin="Origin.CenterLeft" Dot Bordered>
                            <div class="pl-2">
                                Full-Width Mode - <CodeInline>FullWidth=True</CodeInline>: Forces the component to stretch and occupy 100% of its parent container’s width.
                            </div>
                        </MudBadge>
                        <MudBadge Class="ml-4" Color="Color.Primary" Origin="Origin.CenterLeft" Dot Bordered>
                            <div class="pl-2">
                                Fit-Content Mode - <CodeInline>FitContent=True</CodeInline>: Instead of expanding, the component adjusts its width to fit only the necessary space required for its content.
                            </div>
                        </MudBadge>
                    </MudStack>
                    <MudAlert Class="mt-4" Severity="Severity.Info">
                        Note: When using FitContent, the width of the select component can depend on the Placeholder, Label, Adornment, and Clearable properties.
                    </MudAlert>
                </Description>
            </SectionHeader>
            <SectionContent ShowCode="false" Code="@nameof(SelectFitContentExample)">
                <SelectFitContentExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Value presentation">
                <Description>
                    Select uses the render fragments you specify for the items to display the selected value (if any). If you don't specify render fragments, the value will be displayed as text. Also, if you have render fragments
                    but the value that has been set is not in the list, it will also be displayed as text.
                </Description>
            </SectionHeader>
            <SectionContent ShowCode="false" Code="@nameof(SelectPresentationExample)">
                <SelectPresentationExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Custom converter">
                <Description>
                    Select has a built-in <CodeInline>DefaultConverter</CodeInline> which converts the values from any primitive type to string for presentation of the selected value.
                    You can customize that converter as described under <MudLink Href="/features/converters">Converters</MudLink>. Here, we use <CodeInline>ToStringFunc</CodeInline> to
                    convert objects of type Pizza to their string representation. Note how the <CodeInline Tag="true">MudSelectItem</CodeInline> uses that string representation if you don't
                    specify a render fragment.
                </Description>
            </SectionHeader>
            <SectionContent ShowCode="false" Code="@nameof(SelectCustomConverterExample)">
                <SelectCustomConverterExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Numeric collection">
                <Description>
                    When using the properties <CodeInline>Required=true</CodeInline> and <CodeInline>Clearable=true</CodeInline> in combination with a numeric collection,
                    it is required that the items of the collection are of a nullable numeric type such as <CodeInline>int?</CodeInline> or <CodeInline>double?</CodeInline> in order
                    for the <CodeInline>Required</CodeInline> property to behave as expected.
                </Description>
            </SectionHeader>
            <SectionContent ShowCode="false" Code="@nameof(SelectNumericCollectionExample)">
                <SelectNumericCollectionExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Placement">
                <Description>
                    The component uses <MudLink Href="/components/popover">MudPopover</MudLink> to place it's list of items. It can be controlled with <CodeInline>AnchorOrigin</CodeInline> and <CodeInline>TransformOrigin</CodeInline>
                    To change where the popover should start from you only need to change the <CodeInline>AnchorOrigin</CodeInline>. <MudLink Color="Color.Secondary" Href="/components/popover">Read more on popover's page.</MudLink>
                </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(SelectAdvancedPopoverExample)" ShowCode="false">
                <SelectAdvancedPopoverExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Keyboard Navigation">
                <Description>
                    <MudText>MudSelect accepts keys to keyboard navigation.</MudText>
                    <br />
                    <MudText><CodeInline>Space</CodeInline> key to toggle dropdown open/close</MudText>
                    <MudText><CodeInline>Escape</CodeInline> or <CodeInline>Alt+ArrowUp</CodeInline> keys to close dropdown</MudText>
                    <MudText><CodeInline>Enter</CodeInline> or <CodeInline>NumpadEnter</CodeInline> or <CodeInline>Alt+ArrowDown</CodeInline> keys to open dropdown</MudText>
                    <MudText><CodeInline>ArrowUp</CodeInline> key to select/navigate previous item</MudText>
                    <MudText><CodeInline>ArrowDown</CodeInline> key to select/navigate next item</MudText>
                    <MudText><CodeInline>Home</CodeInline> key to select/navigate first item</MudText>
                    <MudText><CodeInline>End</CodeInline> key to select/navigate last item</MudText>
                    <MudText><CodeInline>Enter</CodeInline> or <CodeInline>NumpadEnter</CodeInline> keys to select item (MultiSelect only)</MudText>
                    <MudText><CodeInline>Ctrl+A</CodeInline> key to toggle select all/clear all items (MultiSelect only)</MudText>
                    <MudText><CodeInline>Printable Characters</CodeInline> to set the first item in the list whose text starts with that character. Press again to select the next item with the same status.</MudText>
                    <br />
                    <MudText>*Disabled items cannot be selected by keys.</MudText>
                </Description>
            </SectionHeader>
            <SectionContent ShowCode="false" Code="@nameof(SelectKeyboardNavigationExample)">
                <SelectKeyboardNavigationExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="DropdownSettings">
                <Description>
                    This component leverages <MudLink Href="/components/popover">MudPopover</MudLink> along with
                    <MudLink Href="/components/overlay">MudOverlay</MudLink> to manage its item list.
                    You can configure certain aspects using <CodeInline>DropdownSettings</CodeInline>,
                    which sets default appearance and behavior properties.
                    Learn more on the <MudLink Color="Color.Secondary" Href="/components/popover#dropdownsettings">popover documentation page.</MudLink>
                </Description>
            </SectionHeader>
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>
